<!--  -->
<template>
    <div class='news'>
        <p>
            <span style="font-weight: 900;font-size: 17px;">最新消息</span>
            <span style="font-size: 14px; color: #555; padding-left: 10px;">最新行业动态</span>
            <span style="float: right; font-size: 14px; color: #555;">更多&gt;</span>
        </p>
        <div class="content" v-for="item in list1" :key="item.id">
            <div class="cright">
                <img :src="item.pic" alt="" style="width: 110px;height: 110px;">
            </div>
            <div class="cleft">
                <p style="font-weight: 400;">
                    {{ item.title }}
                </p>
                <p style="color: blue; font-size: 12px;">{{ item.keyword }}</p>
                <p >
                    <span style="font-size: 12px;color: #555;">2小时前</span>
                <div class="ai">
                    <span style="font-size: 12px; color: #555; ">{{ item.collection }}</span>
                    <img src="../../public/images/heart.png" alt="">
                </div>

                </p>
            </div>

        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import service from '@/utils/request';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            list1: []
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        let that = this;
        service({
            url: "news",
            method: "GET",
        }).then(res => {
            that.list1 = res.data.data;
            console.log("news", that.list1);
        })

    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，激活
    deactivated() { }, //如果页面有keep-alive缓存功能，非激活
}
</script>
<style lang="less">
.news {
    width: 360px;
    background-color: white;
    margin: 10px auto;
}

.content {
    width: 100%;
    height: 130px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;

    .cright {
        width: 110px;
        height: 110px;

    }

    .cleft {
        height: 110px;
        margin-left: 10px;
        // background-color: green;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .p1{
            width: 100%;
            height: 17px;
            display: flex;
            flex-direction: row;
           
        }
        .ai{
        
            width: 60px;
            height: 16px;
            position: absolute;
            top: 80px;
            // bottom: 0px;
            right: 0px;
           
        }
    }
}
</style>